import {DependencyList, useCallback, useState} from 'react'
import {useIsomorphicLayoutEffect} from "ahooks";
import useWindowSize from "@/hooks/useWindowSize";
import useBaseFontSize from "@/hooks/useBaseFontSize.ts";

const HEADER_BASE_HEIGHT = 195;//表头195
const FOOTER_HEIGHT = 12;//底部预留 12px空间
const CONTENT_PADDING_HEIGHT = 50;//表格Card padding 48 + border 2
const ANTD_PAGINATION_HEIGHT = 56;//分页插件高度
const ANTD_TABLE_HEAD_HEIGHT = 57;//表头高度
//固定需要减去的高度
const FIXED_HEIGHT = FOOTER_HEIGHT + CONTENT_PADDING_HEIGHT;

interface UseScrollHeightOption {
    pagination: boolean; //是否存在分页
    tableHead: boolean; //是否存在表头,默认单行表头传true,其他情况传false，并再deps中传入定制表头高度
    deps?: DependencyList;//其他高度依赖
}

/**
 * 为antd table定制 scroll的高度
 */
const useScrollHeight = ({pagination, tableHead, deps}: UseScrollHeightOption) => {
    const [height, setHeight] = useState<number>(0)

    const {height: windowHeight} = useWindowSize();
    const baseFontSize = useBaseFontSize();

    const handleHeight = useCallback((deps: DependencyList) => {
        let height = windowHeight - FIXED_HEIGHT * baseFontSize - HEADER_BASE_HEIGHT * baseFontSize;
        height -= (pagination ? ANTD_PAGINATION_HEIGHT : 0);
        height -= (tableHead ? ANTD_TABLE_HEAD_HEIGHT : 0);
        deps?.forEach((item: any) => height -= item);
        setHeight(height);
    }, [windowHeight, baseFontSize])

    useIsomorphicLayoutEffect(() => {
        handleHeight(deps || [])
    }, [windowHeight, baseFontSize, ...deps || []])

    return height
}

export default useScrollHeight
